<style>
	.rent-resource .unit-table {
        border: 1px solid #e5e5e5;
        border-bottom: none;
    }

    .gradient-color {
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
    }

    .bill-close-image {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-top: -2px;
    }

    .bill-open-image {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-top: -2px;
    }

	.isStyleCommis {
		background: #f1f1f1;
	}
    .operaTionArea {
		margin-top: 20px;
		font-size: 14px;
		color: #666;
		border-bottom: 1px solid #F2F2F2
	}

	.CZOpenArea {
		height: 27px;
		overflow: hidden;
	}

	.OTA_title,
	.OTA_person {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.OTA_typeBox {
		display: flex;
		margin-bottom: 10px;
	}

	.OTA_type {
		flex-wrap: wrap;
	}

	.OTA_type>ul>li {
		margin-bottom: 10px;
	}

	.OTA_typeBox>div:nth-child(1) {
		min-width: 105px;
		margin-right: 40px;
	}

	.OTA_typeBox>div:nth-child(1)::before {
		display: inline-block;
		content: '';
		width: 6px;
		height: 6px;
		background: rgba(216, 216, 216, 1);
		border-radius: 50%;
		margin-right: 10px;
	}

	.OTA_person {
		color: #999;
	}

	.OTA_title>li:nth-child(1) {
		color: #929BA8
	}

	.OTA_title>li:nth-child(2) {
		cursor: pointer;
		color: #337AB7
	}

	.OTA_mask {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: #D8D8D8
	}
	.width-max  input{
			height: 40px;
	}
	.bill-img{
		position: relative;
	}

</style>

<section id="bill-edit">
	<div class="bill-edit-head border-b">应收账款-收款详情</div>
	<div class="bill-boxshadow">
		<div class="bill-due-to">
			<b class="icon-Gm-calendar"></b><span class="color-orange">账期 {{billData.beginDate | timestamp}} 至
				{{billData.endDate | timestamp}}</span>
		</div>
	</div>
	<div class="bill-contract-content">
		<h1 class="font-16 pb-10"><strong>结算信息</strong></h1>
		<div class="contract-number dy-flex">
			<div class="gl-num mr-24" v-if="contractData.mCode">管理编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'"
				 class="ml-24">{{contractData.mCode}}</a></div>
			<div class="ht-num" v-if="contractData.cCode">合同编号：<a :href="'#/contractNewDeatil?id='+idA.idb+'&ddtab=true'" class="ml-24">{{contractData.cCode}}</a></div>
		</div>
		<div class="bill-number" v-if="(billData.billTypeCode != 'YXTK') && billData.billTypeCode != 'YX'">合同名称：<span class="ml-24">
				{{contractData.contractName ? contractData.contractName : '--'}}
			</span></div>
		<div class="bill-number">账单编号：<span class="ml-24">{{billData.no}}</span></div>
		<div class="bill-customer">客户：<span class="ml-24">{{contractData.zlfCompany}}</span></div>
		<div class="bill-as-of-date">收款截止日：
			<span class="ml-24">{{billData.deadlineDate | timestamp}}</span>
		</div>
		<div class="bill-state">状态：
			<span class="ml-24 color-orange">
				<b>{{billData.paymentState | billState}}</b>
				<b class="ml-10 mr-10">{{billData.overdueState | billState}}</b>
				<b>{{billData.billState | billState}}</b>
			</span>
		</div>
	</div>
	<!-- 出租资源 -->
	<div class="rent-resource">
		<h3 class="font-16">出租资源</h3>
		<!-- 单元 -->
		<div v-if="building.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">单元<span>({{Number(totalArea).toFixed(2)}}m²)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('unit')">
					<span style="color:#337ab7" v-if="!unitOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="unitOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!unitOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="unitOpenFlag">
				</div>
			</div>
			<div class="unit-table" v-if="unitOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-2">项目</div>
					<div class="dy-fx-2">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-4">单元</div>
				</div>
				<div class="tb-content">
					<ul class="dy-flex project-cr">
						<li class="dy-fx-2 project">{{contractData.projectName}}</li>
						<li class="dy-fx-7">
							<!-- 楼栋 -->
							<ul class="dy-flex building-cr" v-for="(item,index) in building">
								<li class="dy-fx-2 building">{{item.buildingName}}</li>
								<li class="dy-fx-5">
									<!-- 楼层 -->
									<ul class="dy-flex floor-cr" v-for="(item1,index1) in item.floor">
										<li class="dy-fx-1 floor">{{item1.floorName || '--'}}</li>
										<li class="dy-fx-4 unit">
											<!-- 单元 -->
											<b v-for="(item2,index2) in item1.unit" style="float:left">{{item2}}<i v-if="index2 + 1 !== item1.unit.length">、</i></b>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 工位 -->
		<div v-if="wp.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">工位<span>({{wpTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('wp')">
					<span style="color:#337ab7" v-if="!wpOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="wpOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!wpOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="wpOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="wpOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">工位数</div>
					<div class="position-item">工位</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex" v-for="(item,index) in wp" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.num}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 车位 -->
		<div v-if="st.length">
			<div class="clearfix line-height-34">
				<div class="pull-left">车位<span>({{stTotalNum}}个)</span></div>
				<div class="pull-right cursor" @click="checkDetailMes('st')">
					<span style="color:#337ab7" v-if="!stOpenFlag">展开详情</span>
					<span style="color:#337ab7" v-if="stOpenFlag">收起详情</span>
					<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!stOpenFlag">
					<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="stOpenFlag">
				</div>
			</div>
			<div class="position-table border" v-if="stOpenFlag">
				<div class="tb-title dy-flex border-b gradient-color">
					<div class="dy-fx-3">项目</div>
					<div class="dy-fx-3">楼栋</div>
					<div class="dy-fx-1">楼层</div>
					<div class="dy-fx-1">单元</div>
					<div class="dy-fx-1">车位数</div>
					<div class="position-item">车位</div>
				</div>
				<ul class="tb-content">
					<li class="content-item dy-flex" v-for="(item,index) in st" :buildingId="item.buildingId" :floorId="item.floorId"
					 :unitId="item.unitId">
						<div class="dy-fx-3">{{contractData.projectName}}</div>
						<div class="dy-fx-3">{{item.buildingName}}</div>
						<div class="dy-fx-1">{{item.floorName || '--'}}</div>
						<div class="dy-fx-1">{{item.unitName}}</div>
						<div class="dy-fx-1">{{item.num}}</div>
						<div class="position-item">
							<span class="position">
								<b v-for="(item1,index1) in item.positions" style="float:left">{{item1.positionName}}<i v-if="index1 + 1 !== item.positions.length">、</i></b>
							</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="mt-15" v-if="billData.carryOverInfos.length">
		<h3 class="font-16">结转记录</h3>
		<div class="box-i-shadow br-4 border text-center">
			<div class="dy-flex line-height-40">
				<div class="dy-fx-2 border-r">关联账单</div>
				<div class="dy-fx-2 border-r">结转时间</div>
				<div class="dy-fx-2 border-r">结转费项</div>
				<div class="dy-fx-2 border-r">转入金额</div>
				<div class="dy-fx-2 border-r">转出金额</div>
				<div class="dy-fx-4 border-r">备注</div>
			</div>
			<div class="dy-flex line-height-40 border-t" v-for="item in billData.carryOverInfos">
				<div class="dy-fx-2 border-r"><a target="_blank" :href="'#/billDetail?id='+item.billId+'&aid='+item.contractId+'&ddtab=true'">{{item.billNo}}</a></div>
				<div class="dy-fx-2 border-r">{{item.carryOverDate | timestamp}}</div>
				<div class="dy-fx-2 border-r">{{item.expenseName}}</div>
				<div class="dy-fx-2 border-r">{{item.carryOverAmountInto | formatNum}}</div>
				<div class="dy-fx-2 border-r">{{item.carryOverAmountOut | formatNum}}</div>
				<div class="dy-fx-4 border-r">{{item.memo || '--'}}</div>
			</div>
		</div>
	</div>

	<!-- 结算明细 -->
	<div class="bill-detail">
		<div class="dy-flex mb-10" style="justify-content: space-between;">
			<h3 class="font-16">结算明细</h3>
			<div v-if="permissions.indexOf('c360') > -1">
				<hl-button size="mini" class="pull-right" v-if="editFlag && billData.billState === 'WSK' && billData.paymentState !== 'APE' && billData.contractAlterFlag == 'N'"
				 @on-click="editSave(false)">编辑</hl-button>
				<hl-button size="mini" class="pull-right" v-if="!editFlag && billData.billState === 'WSK' && billData.paymentState !== 'APE'"
				 @on-click="editSave(true)">保存</hl-button>
			</div>
		</div>
		<div class="box-i-shadow br-4 overflow">
			<div class="dy-flex bill-detail-head">
				<div class="dy-fx-2">费项</div>
				<div class="dy-fx-1">状态</div>
				<div class="dy-fx-4">历史结算(元)</div>
				<div class="dy-fx-2">减免金额(元)</div>
				<div class="dy-fx-2">历史结转(元)</div>
				<div class="dy-fx-2">本次应收(元)</div>
			</div>
			<div class="dy-flex bill-detail-list " v-for="item in billData.expenses" v-if="item.expenseType !== 'T'">
				<div class="dy-fx-2">{{item.name}}</div>
				<div class="dy-fx-1 color-orange">{{item.paymentState | billState}}</div>
				<div class="dy-fx-4 fx-wrap text-center">
					<div class="width-half color-999 border-r">应收本金</div>
					<div class="width-half color-999">已收本金</div>
					<div class="width-half border-r border-t">
						{{item.amountReceived | toFixed2 | formatNum}}
					</div>
					<div class="width-half border-t">
						{{item.amountPayed | toFixed2 | formatNum}}
					</div>
					<div class="width-half color-999 border-r border-t">应收滞纳金</div>
					<div class="width-half color-999 border-t">已收滞纳金</div>
					<div class="width-half border-r border-t">
						{{item.lateFeeReceived | toFixed2 | formatNum}}
					</div>
					<div class="width-half border-t">
						{{item.lateFeePayed | toFixed2 | formatNum}}
					</div>
					<div class="width-half color-999 border-r border-t">应退本金</div>
					<div class="width-half color-999 border-t">已退本金</div>
					<div class="width-half border-r border-t">{{item.refundReceived | toFixed2 | formatNum}}</div>
					<div class="width-half border-t">{{item.refundPayed | toFixed2 | formatNum}}</div>
				</div>
				<div class="dy-fx-2 fx-wrap text-center">
					<div class="width-max color-999">减免本金</div>
					<div class="width-max border-t" :class="{'color-bill-active': item.derateExpenseUpdateFlag == 'Y'}">
						{{item.amountDerate | toFixed2 | formatNum}}
					</div>
					<div class="width-max color-999 border-t">减免滞纳金</div>
					<div class="width-max border-t" :class="{'color-bill-active': item.derateLateFeeUpdateFlag == 'Y'}">
						<span v-if="editFlag" :class="{'color-bill-active': item.derateLateFeeUpdateFlag == 'Y'}">{{item.lateFeeDerate | toFixed2 | formatNum}}</span>
						<span v-if="item.paymentState === 'APE' && !editFlag" :class="{'color-bill-active': item.derateLateFeeUpdateFlag == 'Y'}">{{item.lateFeeDerate | toFixed2 | formatNum}}</span>
						<input type="number" class="form-control text-center" :class="{'color-bill-active': item.derateLateFeeUpdateFlag == 'Y'}"
						 v-if="item.paymentState !== 'APE' && !editFlag" v-model="item.lateFeeDerate" @change="computedZNJ(item.lateFeeDerate,index,'lateFeeDerate')"
						 @input="changeBill(index, 'derate_late_fee_update_flag')">
					</div>
					<div class="width-max color-999 border-t" ><span style="height: 40px; background: rgb(244, 244, 244); display: block;"></span></div>
					<div class="width-max border-t">
						<span style="height: 40px; background: rgb(244, 244, 244); display: block;"></span>
					</div>
				</div>
				<div class="dy-fx-2 fx-wrap text-center">
					<div class="width-max color-999">抵扣本金</div>
					<div class="width-max border-t">
						<span>{{item.carryOverTotalAmount | toFixed2 | formatNum}}</span>
					</div>
					<div class="width-max color-999 border-t">
						<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
					</div>
					<div class="width-max border-t">
						<span style="height:40px;background:rgba(244,244,244,1);display:block;"></span>
					</div>
					<div class="width-max color-999">结转抵扣</div>
					<div class="width-max border-t">
						<span>{{item.refundCarryover | toFixed2 | formatNum}}</span>
					</div>
				</div>
				<div class="dy-fx-2 fx-wrap text-center">
					<div class="width-max color-999">本金</div>
					<div class="width-max border-t">
						{{item.amountTPay | toFixed2 | formatNum}}
					</div>
					<div class="width-max color-999 border-t">滞纳金</div>
					<div class="width-max border-t" :class="{'color-bill-active': item.lateFeeTPayUpdateFlag == 'Y'}">
						<span v-if="editFlag" :class="{'color-bill-active': item.lateFeeTPayUpdateFlag == 'Y'}">{{item.lateFeeTPay | toFixed2 | formatNum}}</span>
						<span v-if="item.paymentState === 'APE' && !editFlag" :class="{'color-bill-active': item.lateFeeTPayUpdateFlag == 'Y'}">{{item.lateFeeTPay | toFixed2 | formatNum}}</span>
						<input type="number" class="form-control text-center" :class="{'color-bill-active': item.lateFeeTPayUpdateFlag == 'Y'}"
						 v-if="item.paymentState !== 'APE' && !editFlag" v-model="item.lateFeeTPay" @change="computedZNJ(item.lateFeeTPay,index,'lateFeeTPay')"
						 @input="changeBill(index, 'lateFeeTPayUpdateFlag')">
					</div>
					<div class="width-max color-999 border-t">本次应退</div>
					<div class="width-max border-t">{{item.refundTPay | toFixed2 | formatNum}}</div>
				</div>
			</div>
		</div>
	</div>

	<div class="bill-t-item box-i-shadow br-4 mt-15 border" v-if="temporarys > 0">
		<div class="dy-flex">
			<div class="dy-fx-3 border-r">费项</div>
			<div class="dy-fx-3 border-r">结转抵扣(元)</div>
			<div class="dy-fx-3 border-r">费项本金(元)</div>
			<div class="dy-fx-3 border-r">备注</div>
			<div class="dy-fx-1 border-r">状态</div>
			<div class="dy-fx-2">操作</div>
		</div>
		<div class="dy-flex border-t" v-for="item in billData.expenses" v-if="item.expenseType === 'T'">
			<div class="dy-fx-3 border-r" :class="{'color-bill-active': item.nameUpdateFlag == 'Y'}">{{item.name}}</div>
			<div class="dy-fx-3 border-r">
				{{item.carryOverTotalAmount | toFixed2 | formatNum}}
			</div>
			<div class="dy-fx-3 border-r" :class="{'color-bill-active': item.amountReceiveUpdateFlag == 'Y'}">
				{{item.amountReceived | toFixed2 | formatNum}}
			</div>
			<div class="dy-fx-3 border-r ellipsis-1" :class="{'color-bill-active': item.memoUpdateFlag == 'Y'}">{{item.memo || '--'}}</div>
			<div class="dy-fx-1 border-r color-orange">
				{{item.paymentState | billState}}
			</div>
			<div class="dy-fx-2">--</div>
		</div>
	</div>

	<div class="bill-histroy mt-15" v-if="billData.transactions.length">
		<h3 class="font-16">历史结算</h3>
		<div class="box-i-shadow bill-histroy-content br-4 border">
			<div class="dy-flex">
				<div class="dy-fx-2 border-r">收款时间</div>
				<div class="dy-fx-2 border-r">支付时间</div>
				<div class="dy-fx-3 border-r">收款金额(元)</div>
				<div class="dy-fx-3 border-r">滞纳金</div>
				<div class="dy-fx-2 border-r">收款渠道</div>
				<div class="dy-fx-5 border-r">支付单号</div>
				<div class="dy-fx-2 border-r">收款人</div>
				<div class="dy-fx-1 border-r">说明</div>
				<div class="dy-fx-2">支付凭证</div>
			</div>
			<div class="dy-flex border-t" v-for="item in billData.transactions">
				<div class="dy-fx-2 border-r">
					{{item.createTime | timestamp}}
				</div>
				<div class="dy-fx-2 border-r">
					{{item.paymentTime | timestamp}}
				</div>
				<div class="dy-fx-3 border-r">
					{{item.amountTPay | toFixed2 | formatNum}}
				</div>
				<div class="dy-fx-3 border-r">
					{{item.lateFeeTPay | toFixed2 | formatNum}}
				</div>
				<div class="dy-fx-2 border-r">
					{{item.payWay | billPayWay}}
				</div>
				<div class="dy-fx-5 border-r ellipsis-1">
					{{item.paymentNo ? item.paymentNo : '--'}}
				</div>
				<div class="dy-fx-2 border-r ellipsis-1">{{item.operatorName}}</div>
				<div class="dy-fx-1 border-r">
					<span v-if="!item.memo">--</span>
					<a href="javascript:;" v-if="item.memo" @click="getMemo(item.memo, true)">查看</a>
				</div>
				<div class="dy-fx-2">
					<span v-if="!item.vouchers">--</span>
					<a href="javascript:;" v-if="item.vouchers" @click="getBigPic(item.vouchers)">查看</a>
				</div>
			</div>
		</div>
	</div>

	<div class="mt-15" v-if="billData.invoiceInfos.length">
		<h3 class="font-16">发票记录</h3>
		<div class="box-i-shadow br-4 border text-center">
			<div class="dy-flex line-height-40">
				<div class="dy-fx-2 border-r">发票号码</div>
				<div class="dy-fx-2 border-r">发票代码</div>
				<div class="dy-fx-2 border-r">发票类型</div>
				<div class="dy-fx-2 border-r">开票时间</div>
				<div class="dy-fx-2 border-r">开票金额</div>
				<div class="dy-fx-2 border-r">不含税金额</div>
				<div class="dy-fx-1">税额</div>
			</div>
			<div class="dy-flex line-height-40 border-t" v-for="item in billData.invoiceInfos">
				<div class="dy-fx-2 border-r">{{item.invoiceNo}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceCode || '--'}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceTypeVal || '--'}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceOutTime | timestamp}}</div>
				<div class="dy-fx-2 border-r">{{item.invoiceOutAmount | formatNum}}</div>
				<div class="dy-fx-2 border-r">{{item.taxFree | formatNum}}</div>
				<div class="dy-fx-1">{{item.taxAmount | formatNum}}</div>
			</div>
		</div>
	</div>

	<!-- //发票 -->
	<div class="mt-15 border-b">
		<h3 class="font-16">发票收据</h3>
		<div v-for="(item, index) in invoiceInfos" class="mb-10" style="padding-top: 20px;">

			<div class="dy-flex line-height-34 mt-5">
				<div class="dy-flex dy-fx-1">
					<div class="dy-fx-1"><span  class="required">*</span>关联费项:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width:100%;">
							<hl-select :data="billData.expenses" v-model="item.id" type="primary" @on-change="selectExpense($event,index)" width="100%"></hl-select>
						</div>
					</div>
					<div class="dy-fx-2"></div>
				</div>
				<div class="dy-flex dy-fx-1">
					<div class="dy-fx-1"><span class="required">*</span>发票类型:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width:100%;">
							<div class="select-ul">
								<span class="select-name br-4 box-i-shadow">
									请选择
								</span>
								<ul>
									<li v-for="item0 in invoicetype" class="relative">
										<input type="radio" class="absolute" name="payState" :value="item0.dictCode" v-model="invoiceInfos[index].invoice_type"
										 style="width:100%;height:100%;left:0;top:0;opacity:0;margin:0;"> {{item0.dictName}}
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="dy-fx-2 "><span class="icon-Gm-delete icon-Gm-deleteItem js-remove-water line-height-34 "  @click="delinvoice(index)" style="padding-left: 40px;">删除此发票</span></div>
				</div>
			</div>

			<div class="dy-flex line-height-34 mt-5">
				<div class="dy-flex dy-fx-1">
					<div class="dy-fx-1"><span class="required">*</span>开票金额:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width:100%;">
							<input type="text" class="form-control" v-model="item.invoice_out_amount" @blur="checkoutMoney(item)">
						</div>
					</div>
					<div class="dy-fx-2"><span class="ml-10">元</span></div>
				</div>
				<div class="dy-flex dy-fx-1">
					<div class="dy-fx-1"><span style="color:white;">*</span>开票时间:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width: 100%">
							<web-calendar v-model="item.invoice_out_time" :tips="item.tips" type="primary"></web-calendar>
						</div>
					</div>
					<div class="dy-fx-2"></div>
				</div>
			</div>

			<div class="dy-flex line-height-34 mt-5">
				<div class="dy-flex dy-fx-1">
					<div class="dy-fx-1"><span style="color: red;">*</span>不含税金额:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width: 100%">
							<input type="text" class="form-control" v-model="item.tax_free" @blur="checkoutMoneySelf(item)">
						</div>
					</div>
					<div class="dy-fx-2"><span class="ml-10">元</span></div>
				</div>
				<div class="dy-fx-1 dy-flex">
					<div class="dy-fx-1"><span style="color: red;">*</span>发票号码:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width: 100%">
							<input type="text" class="form-control" v-model="item.invoice_no">
						</div>
					</div>
					<div class="dy-fx-2"></div>
				</div>
			</div>

			<div class="dy-flex line-height-34 mt-5">
				<div class="dy-fx-1 dy-flex">
					<div class="dy-fx-1"><span style="color: red;">*</span>税额:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width: 100%;">
							<input type="text" class="form-control" v-model="item.tax_amount" @blur="checkoutMoneySelf(item)">
						</div>
					</div>
					<div class="dy-fx-2"><span class="ml-10">元</span></div>
				</div>
				<div class="dy-flex dy-fx-1">
					<div class="dy-fx-1"><span style="color:white;">*</span>发票代码:</div>
					<div class="dy-fx-3 dy-flex ml-10">
						<div style="width: 100%;">
							<input type="text" class="form-control" v-model="item.invoice_code">
						</div>
					</div>
					<div class="dy-fx-2"></div>
				</div>
			</div>
		</div>
		<div class="mt-5 pb-10">
			<hl-button class="js-add-water" type="text" icon="icon-Org-account" @on-click="newAddinvoice" v-if="permissions.indexOf('c164') > -1">新增发票</hl-button>
		</div>
	</div>

	<div class="bill-settlement mt-15">
		<h3 class="font-16">费用结算</h3>
		<div class="bill-set-list" v-for="(item, index) in txs" style="padding-top: 20px;">
			<div class="dy-flex">
				<div class="dy-fx-1"><span class="color-ec4151">*</span>本次实收本金：</div>
				<div class="dy-fx-2"><input type="number" class="form-control received-money" v-model="item.amountTPay"></div>
				<div class="dy-fx-4"><span class="ml-10">元</span></div>
				<div class="js-remove-water icon-Gm-delete icon-Gm-deleteItem dy-fx-1" @click="delWater(index)">删除此流水</div>
			</div>
			<div class="dy-flex mt-10">
				<div class="dy-fx-1"><span class="color-ec4151">*</span>本次实收滞纳金：</div>
				<div class="dy-fx-2"><input type="number" class="form-control received-money" v-model="item.lateFeeTPay"></div>
				<div class="dy-fx-4"><span class="ml-10">元</span></div>
				<div class="dy-fx-1"></div>
			</div>
			<div class="dy-flex mt-10">
				<div class="dy-fx-1"><span class="color-ec4151">*</span>收款方式：</div>
				<div class="dy-fx-2">
					<div class="select-ul">
						<span class="select-name br-4 box-i-shadow">
							请选择收款方式
						</span>
						<ul>
							<li v-for="item in payfn" class="relative">
								<input type="radio" class="absolute" name="payState" :value="item.code" v-model="txs[index].payment_way" style="width:100%;height:100%;left:0;top:0;opacity:0;margin:0;">
								{{item.name}}
							</li>
						</ul>
					</div>
				</div>
				<div class="dy-fx-4"></div>
				<div class="dy-fx-1"></div>
			</div>
			<div class="dy-flex mt-15">
				<div class="dy-fx-1"><span class="color-ec4151">*</span>收款时间：</div>
				<div class="dy-fx-2">
					<web-calendar type="primary" v-model="item.payment_time"></web-calendar>
				</div>
				<div class="dy-fx-4"><span class="ml-10"></span></div>
				<div class="dy-fx-1"></div>
			</div>
			<div class="dy-flex mt-15">
				<div class="dy-fx-1" style="min-width: 121px;"><span style="color: white;">*</span>收款账户：</div>
				<div class="dy-fx-2">
					<hl-select :data="billData.receiptAccountList" v-model="item.receiptAccount" :width="278" type="primary"></hl-select>
				</div>
				<div class="dy-fx-4"><span class="ml-10"></span></div>
				<div class="dy-fx-1"></div>
			</div>
			<div class="dy-flex mt-15">
				<div class="dy-fx-1">收款单号：</div>
				<div class="dy-fx-2">
					<input type="text" class="form-control" v-model="item.payment_no">
				</div>
				<div class="dy-fx-4"><span class="ml-10"></span></div>
				<div class="dy-fx-1"></div>
			</div>
			<div class="dy-flex mt-15">
				<div class="dy-fx-1">说明：</div>
				<div class="dy-fx-3">
					<textarea class="form-control" v-model="item.memo"></textarea>
				</div>
				<div class="dy-fx-3"><span class="ml-10"></span></div>
				<div class="dy-fx-1"></div>
			</div>
			<div class="dy-flex mt-15">
				<div class="dy-fx-1">收款凭证：</div>
				<div class="dy-fx-4">
					<div class="bill-img" v-for="(imgs, now) in imgsArr[index].url" style="marginBottom:10px;">
						<img :src="imgs" alt="" @click="previewImage(imgs)">
						<span @click="delPic(index, now)">删除</span>
					</div>
					<div class="bill-addImg" v-if="imgsArr[index].url.length < 15" @click="uploadImg(index)">+</div>
					<div>建议上传大小不超过2M的JPG或PNG格式图片，最多上传15张</div>
				</div>
				<div class="dy-fx-2"><span class="ml-10"></span></div>
				<div class="dy-fx-1"></div>
			</div>
			<div class="dy-flex mt-15" v-if="txs.length > 1">
				<div class="dy-fx-1"></div>
				<div class="dy-fx-4">

				</div>
				<div class="dy-fx-2"><span class="ml-10"></span></div>
				<div class="dy-fx-1"></div>
			</div>
		</div>
	</div>

	<div class="" v-if="total > 0">
		<hl-button class="js-add-water" type="text" icon="icon-Org-account" @on-click="addNewWater">新增流水</hl-button>
	</div>

	<div class="border-t mt-15">
		<h3 class="font-16 pt-10">费用总计</h3>
		<div class="dy-flex">
			<div class="dy-fx-1">本次应收：</div>
			<div class="dy-fx-1 text-right">{{total | toFixed2 | formatNum}}</div>
			<div class="dy-fx-5">元</div>
			<div class="dy-fx-1"></div>
		</div>
		<div class="dy-flex">
			<div class="dy-fx-1">本次实收：</div>
			<div class="dy-fx-1 text-right color-orange">{{cumulation | toFixed2 | formatNum}}</div>
			<div class="dy-fx-5">元</div>
			<div class="dy-fx-1"></div>
		</div>
	</div>
	<!-- 操作记录 -->
	<div class="operaTionArea" :class="{'CZOpenArea':!CZOpenFlag}" v-if="logData.length">
		<ul class="OTA_title">
			<li>操作记录</li>
			<li @click="CZOpenFlag = !CZOpenFlag">
				<span v-if="!CZOpenFlag">展开详情</span>
				<span v-if="CZOpenFlag">收起详情</span>
				<img class="bill-close-image" src="assets/images/right.png" alt="" v-if="!CZOpenFlag">
				<img class="bill-open-image" src="assets/images/down.png" alt="" v-if="CZOpenFlag">
			</li>
		</ul>
		<div v-for="(item,index) in logData">
			<ul class="OTA_person">
				<li>操作人：{{item.logUser}}</li>
				<li>{{item.logTime}}</li>
			</ul>
			<div class="OTA_typeBox">
				<div>{{item.operationName}}</div>
				<div class="OTA_type">
					<ul v-for="(item2,index2) in item.logRecords">
						<li v-if="item2.list" v-for="(item3,index3) in item2.list">
							<span v-for="item4 in item3">
								<span v-if="item4.logType == 'text'"><span>{{item4.content}} <span>--</span> </span>
								</span>
								<span v-if="item4.logType == 'change'"><span style="margin-right:20px">{{item4.key}}</span><span>原值</span><span
									 style="margin-right:20px;color: #565E99">“{{item4.before}}”</span><span>修改值</span><span style="color: #565E99">“{{item4.after}}”</span></span>
								<span v-if="item4.logType == 'value'"><span>{{item4.key}}</span><span>“{{item4.content}}”</span></span>
							</span>
						</li>
						<li v-if="!item2.list">
							<span v-for="(item3,index3) in item2.rowData">
								<span v-if="item3.logType == 'text'" :class="'bill_'+item3.logType"><span>{{item3.content}}</span></span>
								<span v-if="item3.logType == 'change'" :class="'bill_'+item3.logType"><span>{{item3.key}}</span><span>原值</span><span
									 style="margin-right:20px">“{{item3.before}}”</span><span>修改值</span><span>“{{item3.after}}”</span></span>
								<span v-if="item3.logType == 'value'" :class="'bill_'+item3.logType"><span>{{item3.key}}</span><span>“{{item3.content}}”</span></span>
							</span>
						</li>
					</ul>
				</div>

			</div>
		</div>
	</div>
	<div class="bill-submit mt-15">
		<hl-button type="primary" @on-click="submitBill">确认收款</hl-button>
		<a :href="'#/'+href" class="btn n-btn-outline">返回</a>
	</div>

	<div class="js-trigger-upload"></div>
	<div class="bill-memo-wrap" v-if="memo.flag">
		<div class="bill-memo">
			<div class="bill-title">说明</div>
			<button class="bill-close" @click="getMemo('', false)">×</button>
			<div class="bill-memo-content">{{memo.content}}</div>
		</div>
	</div>

	<!-- 提交收款 -->
	<div class="pop box-o-shadow" v-if="closeFlag" style="width:600px;">
		<div class="head-pop font-16">
			<span class="">提交流水</span>
			<button class="fw-close absolute js-explain-close" @click="submitFp">×</button>
		</div>
		<div class="pl-24 pr-24 content-pop content-24">
			<p class="ml-24">您正在提交 {{contractData.zlfCompany}} {{billData.beginDate | timestamp}} 至 {{billData.endDate | timestamp}}
				账单</p>
			<p class="ml-24">付款截止日期：{{billData.deadlineDate | timestamp}}</p>
			<p class="ml-24">本次应收金额：{{total | toFixed2 | formatNum}}</p>
			<p class="ml-24">本次实收本金：{{cumulation | toFixed2 | formatNum}}</p>
			<p class="ml-24">支付方式：<span v-for="(list, index) in txs">{{list.payment_way | payfn}}
					<span v-if="txs.length > 1 && index < txs.length-1">,</span>
				</span>
			</p>
			<p class="ml-24">支付时间：
				<span v-for="(item, now) in txs">
					{{item.payment_time}}
					<span v-if="txs.length > 1 && now < txs.length-1">,</span>
				</span>
			</p>
		</div>
		<div class="back-contract text-center ptb-10 js-back-content">
			<hl-button type="primary" @on-click="submitQs">确认提交</hl-button>
			<hl-button type="outline" @on-click="submitFp">返回修改</hl-button>
		</div>
	</div>
	<div class="backdrop" v-if="closeFlag"></div>


	<!--提示框1-->
    <div v-if="messageFlag" class="backdrop dy-flex " style="justify-content: center;align-items: center;">
		<div class="bg-fff relative br-4 boradius" style="width: 400px;padding: 8px 0;">
		  <div class="font-16 line-height-45 text-left" style="justify-content: center;align-items: center;padding-left: 26px;">
			<img src="assets/images/gantanhao.png" alt="" class="myicongantanhao" >
			<span style="font-size: 14px; color: #333333; padding-left: 10px;" >发票金额有误，请重新填写</span>
		  </div>
		  <div class="font-14 absolute icon-Gm-close text-center line-height-60 close"
			style="right: 0;top: 0;width: 60px;height: 60px;" @click="messageFlag=!messageFlag">
		  </div>
		</div>
	</div>

	<!--提示框2-->
    <div v-if="errormsgShow" class="backdrop dy-flex" style="justify-content: center;align-items: center;">
		<div class="bg-fff relative br-4" style="width: 400px;">
		  <div class="font-16 text-center errormsg">提交失败</div>
		  <div class="font-14 absolute icon-Gm-close text-center line-height-45 close"
			style="right: 0;top: 0;width: 45px;height: 50px;" @click="closeErrormsg"></div>
		  <div style="background:rgba(249,249,249,1);padding: 25px 25px 40px 25px ;text-align: center; color: #666666;">
			实收金额与发票总额不一致，请确认后提交
		  </div>
		  <div class="footerbtn">
			  <button style="background-color: #5e67a5; color: #fff;" @click="closeErrormsg">前往确认</button>
			  <button @click="closeErrormsg">取消</button>
		  </div>
	  </div>
</section>
<script src="modules/contract/scripts/contract_public.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/bill/scripts/bill_edit.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css">
.errormsg{
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	color: #565E99;
}
.footerbtn{
	width: 100%;
	display: flex;
}
.footerbtn button{
	width: 50%;
	height: 48px;
	line-height: 48px;
	border: none;
	background-color: #fff;
}
	.color-bill-active {
		font-weight: bold;
		color: #5e67a5;
	}

	.hl-select-dropdown-wrap .item {
		white-space: nowrap;
		    text-overflow: ellipsis;
		    overflow: hidden;
		    word-break: break-all;
	}
	.icon-Gm-deleteItem{
		color: #565E99;
	}
	.js-remove-water::before{
		color: #565E99;
		margin-left:10px;
	}
	.myicongantanhao{
		margin-top: -2px;
		width: 20px;
		height: 20px;
	}
	.line-height-60{
		line-height: 60px;
	}
	.boradius{
		border-radius: 8px;
	}
</style>
